<template>
  <view>
    <view v-if="type==1">
      <view class="rules-title">
        牡丹商城用户入驻协议
        <!--  -->
      </view>
      <view class="rules-content">
        <text v-html="detail"></text>
      </view>
      <view class="footer">
        <view class="next" v-if="isChecked" @click="type=2">下一步</view>
        <view class="next" style="background:#CAC6C6" v-else>下一步</view>
        <checkbox-group @change="checkboxChange" style="display: inline">
          <checkbox :checked="isChecked" style="transform: scale(0.65);vertical-align: top;margin-top: -4upx;" />
        </checkbox-group>
        我已同意并阅读
        <text class="protocol" >《牡丹商城商家入驻协议》</text>
      </view>
    </view>
    <view v-if="type==2">
      <view class="rules-title">
        牡丹商城用户入驻协议
      </view>
      <view class="hint">请填写正确的个人信息，方便我们与您联系</view>
      <view class="mdlBox-content">
        <view class="mdlBoxTitle">店铺名称：</view>
        <view class="mdlInput" >
          <input type="text" v-model="form.title" placeholder="请输入店铺名称" />
        </view>
        <view class="mdlBoxTitle">分类：</view>
        <view class="mdlInput" >
          <picker mode="selector" :range="typelist" @change="typeFn"><view>{{typecon}}</view></picker>
        </view>
        <view class="mdlBoxTitle">手机号码：</view>
        <view class="mdlInput" >
          <input type="text"  placeholder="请输入手机号码" v-model="form.mobile"/>
          <text @click="getma">{{jishi}}</text>
        </view>
        <view class="mdlBoxTitle">验证码：</view>
        <view class="mdlInput" >
          <input type="text"  placeholder="请输入验证码" v-model="form.code"/>
        </view>
        <view class="mdlBoxTitle">店铺logo：
          <view class="upbox">
            <view style="position:relative;" @tap="uploadImage">
              <image class="upload-img" :src="form.logo"  v-if="form.logo!=''"></image>
              <view class="thimg">点击替换图片</view>
            </view>
            <image class="upload-img" src="/static/my-img/upload-img.png" @tap="uploadImage" v-if="form.logo==''"></image>
          </view>
        </view>
        <view class="mdlInput" ></view>
        <view class="mdlBoxTitle">店铺所在地：</view>
        <view class="mdlInput" >
          <rf-pick-regions
              :addressData="addressData"
              @getRegions="handleGetRegions">
          </rf-pick-regions>
        </view>
      </view>
      <view class="footer" style="position: relative; margin-top: 80rpx;">
        <view class="next" style="background:#CAC6C6;display: inline-block;" @click="type=1">上一步</view>
        <view class="next" style="display: inline-block;margin-left: 186rpx" @click="ok">下一步</view>
      </view>
    </view>

    <view v-if="type==3">
      <view class="qtitle">企业信息</view>
      <view class="mdlBox-content">
        <view class="mdlBoxTitle">企业名称：</view>
        <view class="mdlInput" >
          <input type="text" v-model="formData.name" placeholder="请输入企业名称" />
        </view>
        <view class="mdlBoxTitle">企业类型：</view>
        <view class="mdlInput" >
          <picker mode="selector" :range="qtypelist" @change="qtypeFn"><view>{{qtypecon}}</view></picker>
        </view>
        <view class="mdlBoxTitle">社会信用代码：</view>
        <view class="mdlInput" >
          <input type="text"  placeholder="社会信用代码" v-model="formData.public_code"/>
        </view>
        <view class="mdlBoxTitle">营业执照：
          <view class="upbox">
            <view style="position:relative;" @tap="uploadImage1">
              <image class="upload-img" :src="formData.business_license"  v-if="formData.business_license!=''"></image>
              <view class="thimg">点击替换图片</view>
            </view>
            <image class="upload-img" src="/static/my-img/upload-img.png" @tap="uploadImage1" v-if="formData.business_license==''"></image>
          </view>
        </view>
        <view class="mdlBoxTitle">上传店铺照片(3张)：
          <view class="upbox">
            <view v-for="item in formData.store_images" style="position:relative;">
              <image :src="item"  class="upload-img"></image>
              <image src="/static/close.png" style="width: 40rpx;height: 40rpx;" class="delbtn" @click="delimg(item)"></image>
            </view>
            <image class="upload-img" :src="'/static/my-img/upload-img.png'" @tap="uploadImage2" v-if="formData.store_images.length <3"></image>
          </view>
        </view>
        <view class="mdlBoxTitle">营业执照有效期：</view>
        <view class="mdlInput" >
          <picker mode="date" @change="timesfn"><view>{{time}}</view></picker>
        </view>
        <view class="mdlBoxTitle">开户银行：</view>
        <view class="mdlInput" >
          <picker mode="selector" :range="banklist" @change="bankFn"><view>{{bankcon}}</view></picker>
        </view>
        <view class="mdlBoxTitle">开户行支行名称：</view>
        <view class="mdlInput" >
          <input type="text"  placeholder="请填写" v-model="formData.bank_branch_name"/>
        </view>
        <view class="mdlBoxTitle">银行卡号：</view>
        <view class="mdlInput" >
          <input type="text"  placeholder="请填写" v-model="formData.public_account"/>
        </view>

        <view class="mdlBoxTitle">开户行所在地：</view>
        <view class="mdlInput" >
          <rf-pick-regions
              :addressData="addressData2"
              @getRegions="handleGetRegions1">
          </rf-pick-regions>
        </view>
      </view>
      <view class="qtitle">法人信息</view>
      <view class="mdlBox-content">
        <view class="mdlBoxTitle">法人姓名：</view>
        <view class="mdlInput" >
          <input type="text" v-model="formData.public_people" placeholder="请输入法人姓名" />
        </view>
        <view class="mdlBoxTitle">法人身份证号码：</view>
        <view class="mdlInput" >
          <input type="text"  placeholder="请输入法人身份证号码" v-model="formData.id_card"/>
        </view>
        <view class="mdlBoxTitle">身份证到期时间：</view>
        <view class="mdlInput" >
          <picker mode="date" @change="sfztimeFn"><view>{{sfztime}}</view></picker>
        </view>
        <view class="mdlBoxTitle">身份证正面：
          <view class="upbox">
            <view style="position:relative;" @tap="uploadImage3">
              <image class="upload-img" :src="formData.id_card_front"  v-if="formData.id_card_front!=''"></image>
              <view class="thimg">点击替换图片</view>
            </view>
            <image class="upload-img" src="/static/my-img/upload-img.png" @tap="uploadImage3" v-if="formData.id_card_front==''"></image>
          </view>
        </view>
        <view class="mdlBoxTitle">身份证反面：
          <view class="upbox">
            <view style="position:relative;" @tap="uploadImage4">
              <image class="upload-img" :src="formData.id_card_back"  v-if="formData.id_card_back!=''"></image>
              <view class="thimg">点击替换图片</view>
            </view>
            <image class="upload-img" src="/static/my-img/upload-img.png" @tap="uploadImage4" v-if="formData.id_card_back==''"></image>
          </view>
        </view>
        <view class="mdlBoxTitle">联系人手机号：</view>
        <view class="mdlInput" >
          <input type="text"  placeholder="请填写" v-model="formData.phone"/>
        </view>
        <view class="mdlBoxTitle">联系人邮箱：</view>
        <view class="mdlInput" >
          <input type="text"  placeholder="请填写" v-model="formData.email"/>
        </view>
      </view>
      <view class="footer" style="position: relative; margin-top: 80rpx;">
        <view class="next" style="background:#CAC6C6;display: inline-block;" @click="type=2">上一步</view>
        <view class="next" style="display: inline-block;margin-left: 186rpx" @click="submit2">提交</view>
      </view>
    </view>
  </view>
</template>

<script>
import {uploadImage } from '@/api/userInfo';
import {configList,provinceList} from "@/api/basic";
import rfPickRegions from '@/components/rf-pick-regions';
import {addressDetail,rzdxma,dptype,ruzhu,yinhang,dptj,zhuangtai,dpinfo,qyinfo} from "../../../api/userInfo";
import {moment} from '@/utils/moment.js';
export default {
  components: {
    rfPickRegions
  },
  data() {
    return {
      detail:'',
      jishi:"获取短信验证码",
      token:'',
      type:1,
      isChecked: false,
      qtypelist:["企业","个体工商户"],
      form: {
        member_id: uni.getStorageSync("userInfo").id,
        title: '',
        cate_id: '',
        mobile: '',
        logo: '',
        code: '',
      },
      banklist:[],
      bankdata:{},
      formData: {
        member_id:uni.getStorageSync("userInfo").id,
        type: '1',
        name: '',
        bank_code: '',
        bank_branch_name: '',
        public_code: '',
        business_license: '',
        id_card_front: '',
        id_card_back: '',
        public_people: '',
        phone: '',
        email: '',
        province_id: '',
        city_id: '',
        area_id: '',
        public_account: '',
        store_images: [],
        certificates_validity: '',
        id_card_validity:""
      },
      addressData: {
        realname: '',
        mobile: '',
        address_details: '',
        address_name: '请选择地址',
        address: '',
        is_default: false,
        province_id: '',
        city_id: '',
        area_id: ''
      },
      addressData2: {
        realname: '',
        mobile: '',
        address_details: '',
        address_name: '请选择地址',
        address: '',
        is_default: false,
        province_id: '',
        city_id: '',
        area_id: ''
      },
      typelist:[],
      typedata:[],
      typecon:"请选择",
      qtypecon:"请选择",
      time:"请选择",
      bankcon:"请选择",
      sfztime:"请选择",
      flag:true
    }
  },
  onLoad() {
    this.getinfo()
  },
  onShow(){
    this.token = uni.getStorageSync('accessToken') || undefined;
    this.getConfigList();
    this.getProvinceList();
  },
  methods: {
    // 获取商家申请的状态
    async getinfo(){
      uni.request({
        url: zhuangtai, //仅为示例，并非真实接口地址。
        data: {
          member_id:uni.getStorageSync("userInfo").id
        },
        method:"POST",
        header: {
          'custom-header': 'hello' //自定义请求头信息
        },
        success: (r) => {
          let res=r.data
          if(res.code==200){
            this.getType();
            this.getbank();
            if(res.message=="审核未通过."){
              console.log("审核未通过.")
              uni.showToast({
                title:"审核未通过",
                icon:"none",
                duration:1500
              })
              this.getdpinfo(res.data.merchant_id)
              this.getqyinfo(res.data.merchant_company_id)
            }else{
              if(res.message=="OK"){
                if(res.data==null){
                  uni.showToast({
                    title:"店铺申请已通过",
                    icon:"none",
                    duration:1500
                  })
                  setTimeout(()=>{
                    uni.navigateBack({
                      delta:1
                    })
                  },1500)
                }
              }
            }
          }else{
            uni.showToast({
              title:res.message,
              icon:"none",
              duration:1500
            })
            setTimeout(()=>{
              uni.navigateBack({
                delta:1
              })
            },1500)
          }
        }
      });
    },
    //店铺信息回填
    async getdpinfo(id){
      let res=await this.$post(dpinfo,{merchant_id:id,member_id:uni.getStorageSync("userInfo").id});
      console.log("店铺的信息")
      this.addressData = [res.data.province_id.toString(), res.data.city_id.toString(), res.data.area_id.toString()];
      this.form.title = res.data.title;
      this.form.cate_id = res.data.cate_id.toString();
      this.typecon=res.data.cate_name;
      this.form.mobile = res.data.mobile;
      this.form.logo = res.data.logo;
      this.form.merchant_id = id;
      this.form.area_id = res.data.area_id;
      this.form.city_id = res.data.city_id;
      this.form.province_id = res.data.province_id;
      this.addressData.area_id = res.data.area_id;
      this.addressData.city_id = res.data.city_id;
      this.addressData.province_id = res.data.province_id;
      console.log("店铺信息",res)
    },
    //企业信息回填
    async getqyinfo(id){
      let res=await this.$post(qyinfo,{merchant_company_id:id,member_id:uni.getStorageSync("userInfo").id});
      console.log("qiye信息",res)
      this.formData.area_id = res.data.area_id;
      this.formData.city_id = res.data.city_id;
      this.formData.province_id = res.data.province_id;

      this.addressData2.area_id = res.data.area_id;
      this.addressData2.city_id = res.data.city_id;
      this.addressData2.province_id = res.data.province_id;

      this.formData.type = res.data.type.toString();
      this.qtypecon=this.qtypelist[(res.data.type)- 1];
      this.formData.bank_name = res.data.bank_name;
      this.bankcon= res.data.bank_name;
      this.formData.email = res.data.email;
      this.formData.phone = res.data.phone;
      this.formData.public_people = res.data.public_people;
      this.formData.public_code = res.data.public_code;
      this.formData.public_account = res.data.public_account;
      this.formData.business_license = res.data.business_license;
      this.formData.id_card_back = res.data.id_card_back;
      this.formData.id_card_front = res.data.id_card_front;
      this.formData.member_id = res.data.member_id;
      this.formData.name = res.data.name;
      this.formData.store_images = res.data.store_images;
      this.formData.bank_code = res.data.bank_code;
      this.formData.bank_branch_name = res.data.bank_branch_name;
      this.formData.certificates_validity = res.data.certificates_validity;
      this.time=res.data.certificates_validity;
      this.formData.id_card_validity = res.data.id_card_validity;
      this.sfztime=res.data.id_card_validity;
      this.formData.id_card = res.data.id_card;
      this.formData.merchant_company_id = id;
    },

    // 时间转化
    maketime(val) {
      return moment((+val) * 1000).format('YYYY-MM-DD')
    },
    //判断手机号
    checkPhoneIsValid(mobile) {
      if (!mobile.length < 0) {
        uni.showToast({
          title:"请输入手机号",
          icon:"none"
        })
        return false;
      }
      const reg = /^1[0-9]{10,10}$/;
      if (!reg.test(mobile)) {
        uni.showToast({
          title:"请输入正确的手机号",
          icon:"none"
        })
        return false;
      } else {
        return true;
      }
    },
    // 提交申请
    submit2() {
      if (!this.checkPhoneIsValid(this.formData.phone)) return;
      if (this.formData.public_code.length != 18){
        uni.showToast({
          title:"请输入正确社会信用代码",
          icon:"none"
        })
        return
      }
      if (this.formData.public_account.length < 12){
        uni.showToast({
          title:"请输入正确对公账号",
          icon:"none"
        })
        return
      }
      if (this.formData.store_images.length < 3){
        uni.showToast({
          title:"请上传3张照片",
          icon:"none"
        })
        return
      }
      let formData = this.formData, d = '' , d1 = '';
      //  if (this.formData.certificates_validity != '' && this.formData.id_card_validity != ''){
      //    d = this.formData.certificates_validity;
      //    d1 = this.formData.id_card_validity;
      //    if (this.formData.certificates_validity.toString().length != 10){
      //      d = this.maketime(this.formData.certificates_validity.getTime()/1000);
      //    }else if (this.formData.id_card_validity.toString().length != 10){
      //      d1 = this.maketime(this.formData.id_card_validity.getTime()/1000);
      //    }
      //  }else{
      // uni.showToast({
      // 	title:"请选择营业执照有效期或者身份证到期时间",
      // 	icon:"none"
      // })
      //    return;
      //  }

      // formData.certificates_validity = d;
      // formData.id_card_validity = d1;

      this.$post(dptj,formData).then(res => {
        console.log(res)
        if (res.code != 200) {
          uni.showToast({
            title:res.message,
            icon:"none"
          })
          return
        } else {
          uni.showToast({
            title:res.message,
            icon:"none",
            duration:1500
          })
          setTimeout(()=>{
            uni.navigateBack({
              delta:1
            })
          },1500)
        }
      })
    },
    // 身份证到期时间
    sfztimeFn(e){
      this.formData.id_card_validity=e.detail.value;
      this.sfztime=e.detail.value;
    },
    // 选择开户行
    bankFn(e){
      this.bankcon=this.banklist[e.detail.value]
      for(let i in this.bankdata){
        if(this.bankdata[i]==this.bankcon){
          this.formData.bank_code=i
        }
      }
    },
    // 获取银行信息
    getbank(){
      this.$post(yinhang,{member_id:uni.getStorageSync("userInfo").id}).then(res=>{
        this.bankdata=res.data
        this.banklist=Object.values(res.data)
        console.log("type",this.banklist)
        console.log("type2",this.bankdata)
      })
    },
    // 获取营业执照有效期
    timesfn(e){
      console.log(e)
      this.formData.certificates_validity=e.detail.value;
      this.time=e.detail.value;
    },
    // 获取企业的类型
    qtypeFn(e){
      this.formData.type=e.detail.value+1;
      this.qtypecon=this.qtypelist[e.detail.value]
    },
    // 获取短信验证码
    getma(){
      if(this.flag){
        if(this.form.mobile!=""){
          this.$post(rzdxma,{mobile:this.form.mobile,usage: "registerCompany"}).then(res=>{
            this.flag=false;
            let time = 59;
            let timer = setInterval(() => {
              if (time === 0) {
                this.flag=true;
                clearInterval(timer);
                this.jishi="获取短信验证码"
              } else {
                this.jishi=`${time}S后重试`
                time--
              }
            }, 1000)
            uni.showToast({
              title:res.data
            })
          })
        }else{
          uni.showToast({
            title:"手机号未填写",
            icon:"none"
          })
        }
      }
    },
    // 获取商家入驻的分类
    getType(){
      this.$post(dptype,{member_id:uni.getStorageSync("userInfo").id}).then(res=>{
        this.typedata=res.data
        this.typedata.forEach(item=>{
          this.typelist.push(item.title)
        })
        console.log("type",res)
      })
    },
    // 选择分类
    typeFn(e){
      this.typecon=this.typelist[e.detail.value];
      this.typedata.forEach(item=>{
        if(item.title==this.typecon){
          this.form.cate_id=item.id
        }
      })
    },
    // 点击下一步
    ok(){
      this.$post(ruzhu,this.form).then(res=>{
        uni.showToast({
          title:res.message,
          title:1000
        })
        setTimeout(()=>{
          this.type=3
        },1000)

      })
    },
    // 获取省市区
    getProvinceList() {
      let provinceIndex = 0;
      let cityIndex = 0;
      let areaIndex = 0;
      let province_id = null;
      let city_id = null;
      let area_id = null;
      let province_name = null;
      let city_name = null;
      let area_name = null;
      this.$get(`${provinceList}`).then(async r => {
        this.multiArray[0] = r.data;
        if (this.addressData.province_id) {
          r.data.forEach((item, index) => {
            if (parseInt(item.id, 10) == parseInt(this.addressData.province_id, 10)) {
              provinceIndex = index;
              province_id = item.id;
              province_name = item.title;
            }
          });
        } else {
          province_id = this.multiArray[0][0].id
          province_name = this.multiArray[0][0].title
        }
        await this.$get(`${provinceList}`, {pid: province_id}).then(async r => {
          this.multiArray[1] = r.data;
          if (this.addressData.city_id) {
            r.data.forEach((item, index) => {
              if (parseInt(item.id, 10) == parseInt(this.addressData.city_id, 10)) {
                cityIndex = index;
                city_id = item.id;
                city_name = item.title;
              }
            });
          } else {
            city_id = this.multiArray[1][0].id;
            city_name = this.multiArray[1][0].title;
          }
          await this.$get(`${provinceList}`, {
            pid: city_id
          }).then(r => {
            this.multiArray[2] = r.data;
            if (this.addressData.area_id) {
              r.data.forEach((item, index) => {
                if (parseInt(item.id, 10) == parseInt(this.addressData.area_id, 10)) {
                  areaIndex = index;
                  area_id = item.id;
                  area_name = item.title;
                }
              });
            } else {
              area_id = this.multiArray[2][0].id;
              area_name = this.multiArray[2][0].title;
            }
            this.multiIndex = [provinceIndex, cityIndex, areaIndex]
            this.addressData.province_id = province_id
            this.addressData.city_id = city_id
            this.addressData.area_id = area_id
            this.addressData.address_name = `${province_name}, ${city_name}, ${area_name}`;
            this.loading = false;
            console.log(addressData)
          }).catch(err => {
            this.loading = false;
            console.log(err)
          })
        }).catch(err => {
          console.log(err)
        })
      }).catch(err => {
        console.log(err)
      })
    },
    handleGetRegions(e){
      console.log(e)
      this.form.province_id = e.province_id;
      this.form.city_id = e.city_id;
      this.form.area_id = e.area_id;
    },
    handleGetRegions1(e){
      console.log(e)
      this.formData.province_id = e.province_id;
      this.formData.city_id = e.city_id;
      this.formData.area_id = e.area_id;
    },
    // 获取协议内容
    getConfigList() {
      this.$get(`${configList}`, {
        field:'protocol_rules',
      }).then(r => {
        this.detail = r.data.protocol_rules
      }).catch(err => {
        this.loading = false;
        console.log(err)
      });
    },
    checkboxChange(e) {
      this.isChecked = !this.isChecked
    },
    // 上传店铺logo
    uploadImage () {
      // 从相册选择图片
      const _this = this;
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: function(res) {
          _this.handleUploadFile(res.tempFilePaths);
        }
      });
    },
    // 上传店铺logo
    handleUploadFile (data) {
      const _this = this;
      let filePath = data.path || data[0];
      console.log(filePath)
      uni.uploadFile({
        url : uploadImage,
        filePath,
        name: 'file',
        header: {
          "x-api-key": _this.token,
          "merchant-id": 1
        },
        formData: {
          'access-token': _this.token,
          "merchant-id": 1
        },
        success (r) {
          uni.hideLoading();
          const data = JSON.parse(r.data);
          if (data.code === 200) {
            _this.form.logo = data.data.url;
          } else {
            this.$api.msg('data.message')
          }
        }
      });
    },
    // 删除上传的店铺图片
    delimg(e){
      this.formData.store_images.forEach((item,index)=>{
        if(item==e){
          this.formData.store_images.splice(index,1)
        }
      })
    },
    // 上传营业执照
    uploadImage1 () {
      // 从相册选择图片
      const _this = this;
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: function(res) {
          _this.handleUploadFile1(res.tempFilePaths);
        }
      });
    },
    // 上传店铺logo
    handleUploadFile1 (data) {
      const _this = this;
      let filePath = data.path || data[0];
      console.log(filePath)
      uni.uploadFile({
        url : uploadImage,
        filePath,
        name: 'file',
        header: {
          "x-api-key": _this.token,
          "merchant-id": 1
        },
        formData: {
          'access-token': _this.token,
          "merchant-id": 1
        },
        success (r) {
          uni.hideLoading();
          const data = JSON.parse(r.data);
          if (data.code === 200) {
            _this.formData.business_license= data.data.url;
          } else {
            this.$api.msg('data.message')
          }
        }
      });
    },
    // 上传店铺logo
    handleUploadFile (data) {
      const _this = this;
      let filePath = data.path || data[0];
      console.log(filePath)
      uni.uploadFile({
        url : uploadImage,
        filePath,
        name: 'file',
        header: {
          "x-api-key": _this.token,
          "merchant-id": 1
        },
        formData: {
          'access-token': _this.token,
          "merchant-id": 1
        },
        success (r) {
          uni.hideLoading();
          const data = JSON.parse(r.data);
          if (data.code === 200) {
            _this.form.logo = data.data.url;
          } else {
            this.$api.msg('data.message')
          }
        }
      });
    },
    // 上传店铺图片
    uploadImage2() {
      // 从相册选择图片
      const _this = this;
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: function(res) {
          _this.handleUploadFile2(res.tempFilePaths);
        }
      });
    },
    // 上传店铺logo
    handleUploadFile2(data) {
      const _this = this;
      let filePath = data.path || data[0];
      console.log(filePath)
      uni.uploadFile({
        url : uploadImage,
        filePath,
        name: 'file',
        header: {
          "x-api-key": _this.token,
          "merchant-id": 1
        },
        formData: {
          'access-token': _this.token,
          "merchant-id": 1
        },
        success (r) {
          uni.hideLoading();
          const data = JSON.parse(r.data);
          if (data.code === 200) {
            _this.formData.store_images.push(data.data.url);
          } else {
            this.$api.msg('data.message')
          }
        }
      });
    },
    // 身份证正面
    uploadImage3() {
      // 从相册选择图片
      const _this = this;
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: function(res) {
          _this.handleUploadFile3(res.tempFilePaths);
        }
      });
    },
    // 身份证正面
    handleUploadFile3(data) {
      const _this = this;
      let filePath = data.path || data[0];
      console.log(filePath)
      uni.uploadFile({
        url : uploadImage,
        filePath,
        name: 'file',
        header: {
          "x-api-key": _this.token,
          "merchant-id": 1
        },
        formData: {
          'access-token': _this.token,
          "merchant-id": 1
        },
        success (r) {
          uni.hideLoading();
          const data = JSON.parse(r.data);
          if (data.code === 200) {
            _this.formData.id_card_front=data.data.url;
          } else {
            this.$api.msg('data.message')
          }
        }
      });
    },
    // 身份证反面
    uploadImage4() {
      // 从相册选择图片
      const _this = this;
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: function(res) {
          _this.handleUploadFile4(res.tempFilePaths);
        }
      });
    },
    // 身份证反面
    handleUploadFile4(data) {
      const _this = this;
      let filePath = data.path || data[0];
      console.log(filePath)
      uni.uploadFile({
        url : uploadImage,
        filePath,
        name: 'file',
        header: {
          "x-api-key": _this.token,
          "merchant-id": 1
        },
        formData: {
          'access-token': _this.token,
          "merchant-id": 1
        },
        success (r) {
          uni.hideLoading();
          const data = JSON.parse(r.data);
          if (data.code === 200) {
            _this.formData.id_card_back=data.data.url;
          } else {
            this.$api.msg('data.message')
          }
        }
      });
    },
  }
}
</script>

<style lang="less">
.thimg{
  position: absolute;
  bottom: 0;
  left:20rpx;
  width: 200rpx;
  text-align: center;
  background-color:rgba(250,250,250,0.5);

}
.upbox{
  display: flex;
}
.delbtn{
  position: absolute;
  top:10rpx;
  left:30rpx;
  z-index: 10;
}
.qtitle{
  text-align: center;
  font-size: 38rpx;
  font-weight: bold;
}
page{
  background-color: #ffffff;
}
.rules-content{
  width: 92%;
  margin: 0 auto;
  height: 75vh;
  overflow: auto;
  /*box-shadow: 0 0px 3px 1px #e4e4e4;*/
  /*margin-top: 2px;*/
}
.hint{
  text-align: center;
  font-size: 12px;
  color: #E1251B;
  margin-top: 8px;
}
.upload-img{
  position: relative;
  width: 200upx;
  height: 200upx;
  vertical-align: text-top;
  margin-left: 20upx;
}
.mdlBox-content{
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
}
.rules-title{
	margin-top: 30rpx;
  font-weight: 500;
  line-height: 28px;
  color: #000000;
  text-align: center;
  font-size: 18px;
}
.footer {
  width: 94%;
  margin: 0 3%;
  position: absolute;
  bottom: 12rpx;
  text-align: center;
}
.top-right-bg{
  height: 20px;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 47%;
  z-index: 100;
}

.footer /deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {

  background-color: #E1251B;
}
.footer /deep/ .uni-checkbox-input:hover {
  border-color: #d1d1d1;
}
.next{
  margin: 0 auto 10px;
  width: 250rpx;
  height: 83rpx;
  background: linear-gradient(180deg, #E32971 0%, #EC314E 29%, #F13938 63%, #F83E25 100%);
  border-radius: 8rpx;
  font-size: 38rpx;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 83rpx;
  text-align: center;
  color: #ffffff;
}
.mdlBoxTitle{
  font-size: 32upx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #343434;
  margin-top: 40upx;
  line-height: 60upx;
}

.mdlMoney{
  color: #F87D29;
  font-size: 40upx;
  font-family: PingFang SC;
  font-weight: bold;
  margin-bottom: 30rpx;
}
.mdlInput{
  input{
    font-size: 28rpx;
    width: 65%;
    line-height: 70upx;
    height: 70upx;
    border-bottom: 1px solid #f4f0f0;
  }
  margin-bottom: 40rpx;
  picker{
    font-size: 28rpx;
    width: 65%;
    line-height: 70upx;
    height: 70upx;
    // border-bottom: 1px solid rgb(252, 159, 86);
  }
  text{
    border: 2rpx #DB5E48 solid;
    padding: 5rpx 10rpx;
    margin-top: 40rpx;
    color: #DB5E48;
    font-size: 26rpx;
  }

}
.footer /deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked{
	background-color: #fc9f56;
}
.next{
	background: linear-gradient(180deg, #ffbb6b, #ff753f);
}
</style>
